<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>统计页面</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f4f4;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }
        .chart-container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .chart {
            width: 500px;
            height: 400px;
            margin: 10px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .total-events {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.2em;
            color: #555;
        }
        .chart-title {
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>事件统计</h1>
    <div class="total-events">总共事件数量: <span id="totalEventsCount"></span></div>
    <div class="chart-container">
        <div class="chart" id="priorityChart">
            <div class="chart-title">优先级统计</div>
        </div>
        <div class="chart" id="statusChart">
            <div class="chart-title">状态统计</div>
        </div>
    </div>
</div>

<script>
    // 解析从后端传递过来的JSON字符串
    var eventsList = JSON.parse('${eventsListJson}');

    // 计算事件总数
    var totalCount = eventsList.length;

    // 显示事件总数
    document.getElementById('totalEventsCount').textContent = totalCount;

    // 计算优先级统计数据
    var priorityCount = {
        '重要': 0,
        '紧急': 0,
        '一般': 0
    };
    eventsList.forEach(function(event) {
        priorityCount[event.priority === 0 ? '重要' : event.priority === 1 ? '紧急' : '一般'] += 1;
    });

    // 计算状态统计数据
    var statusCount = {
        '已完成': 0,
        '未完成': 0,
        '作废': 0
    };
    eventsList.forEach(function(event) {
        statusCount[event.status === 0 ? '已完成' : event.status === 1 ? '未完成' : '作废'] += 1;
    });

    // 绘制柱状图的函数
    function drawBarChart(chartId, data, names) {
        var myChart = echarts.init(document.getElementById(chartId));
        var option = {
            title: {
                text: names
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
                data: Object.keys(data)
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: Object.values(data)
            }]
        };
        myChart.setOption(option);
    }

    // 绘制饼状图的函数
    function drawPieChart(chartId, data, names) {
        var myChart = echarts.init(document.getElementById(chartId));
        var option = {
            title: {
                text: names
            },
            tooltip: {},
            legend: {
                data:Object.keys(data)
            },
            series: [{
                name: '数量',
                type: 'pie',
                radius: '55%',
                data: Object.entries(data).map(item => {
                    return {value: item[1], name: item[0]};
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    // 绘制优先级统计图表（柱状图）
    drawBarChart('priorityChart', priorityCount, '优先级统计');
    // 绘制状态统计图表（饼状图）
    drawPieChart('statusChart', statusCount, '状态统计');
</script>
</body>
</html>